var KeyValueUtil = function () {
    var oKeyValueUtil = new Object();
    oKeyValueUtil.init = function (bindDiv, bindButtonDiv, paramInput) {
        this.bindDiv = bindDiv;
        this.bindButtonDiv = bindButtonDiv;
        this.paramInput = paramInput;
        this.bindButtonClick();
    },
    oKeyValueUtil.writeParam = function () {
            var length = oKeyValueUtil.bindDiv.children('div').length;
            if (length == 0) {
                return;
            }
            var childrenDiv = oKeyValueUtil.bindDiv.children('div');
            var map = new Map();
            childrenDiv.each(function () {
                var i = $(this).attr("id");
                var key =$("#inputKey" + i).val();
                var value=$("#inputValue" + i).val();
                if(typeof value == "number"){
                    value=value.toString();
                }
                if(key !="" && value!=""){
                    map.put(key, value);
                }
            })
            oKeyValueUtil.paramInput.val(JSON.stringify(map.data));
    },
    oKeyValueUtil.bindButtonClick = function () {
            this.bindButtonDiv.click(function () {
                var keyIndexStr = $("#paramIndex").val();
                var keyIndex = parseInt(keyIndexStr);
                var name = "key";
                var div = "<div style='margin-bottom: 5px' =" + keyIndex + " id=" + keyIndex + ">" +
                    "<input type='text' id=inputKey" + keyIndex + " style='border:1px solid #378888;font-size:25px' placeholder='" + name + "' name='keyvalueeditor-key'>&nbsp;&nbsp;" +
                    "<input type='text' id=inputValue" + keyIndex + " style='border:1px solid #378888;font-size:25px' placeholder='value' name='keyvalueeditor-key-Value'>" +
                    "&nbsp;&nbsp;" +
                    "<a type ='button'  onclick='oKeyValueUtil.deleteKeyDiv(" + keyIndex + ")'><img src='/images/delete.png'></a></div>";
                oKeyValueUtil.bindDiv.append(div);
                keyIndex += 1;
                $("#paramIndex").val(keyIndex);
            })
    },
    oKeyValueUtil.deleteKeyDiv = function (id) {
            $("#" + id).remove();
    },
    oKeyValueUtil.switchParam = function (obj) {
            var val = obj.val();
            if (val == "body") {
                $("#addParamButton").hide();
                $("#paramValueDiv").show();
            } else if (val = "keyValue") {
                $("#paramValueDiv").hide();
            }
            obj.change(function () {
                var val = obj.val();
                if (val == "body") {
                    $("#paramValueDiv").show();
                    $("#addParamButton").hide();
                    $("#paramKeyDiv").hide();
                } else if (val = "keyValue") {
                    $("#paramKeyDiv").show();
                    $("#addParamButton").show();
                    $("#paramValueDiv").hide();
                }
            })
    },
        oKeyValueUtil.getDataMapJson=function (inputCheckBox) {
            var map =new Map();
            inputCheckBox.each(function (index, element) {
                if (this.checked) {
                    map.put($(element).attr("key"),element.value);
                }
            });
            return JSON.stringify(map.data);
        }
    return oKeyValueUtil;
}
